<template>
  <view class="index-page">
    <!-- 顶部轮播图 -->
    <view class="hero-section">
      <swiper class="hero-swiper" indicator-dots circular autoplay>
        <swiper-item>
          <view class="hero-slide gradient-bg">
            <view class="hero-content">
              <text class="hero-title">袋子派</text>
              <text class="hero-subtitle">让废品回收更简单</text>
              <view class="hero-features">
                <text class="feature-item">🌱 环保生活</text>
                <text class="feature-item">💰 获得收益</text>
                <text class="feature-item">🎯 积分奖励</text>
              </view>
            </view>
          </view>
        </swiper-item>
        <swiper-item>
          <view class="hero-slide" style="background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%);">
            <view class="hero-content">
              <text class="hero-title">环保回收</text>
              <text class="hero-subtitle">从废品分类开始</text>
              <view class="waste-types">
                <view class="waste-type">
                  <text class="waste-icon">📦</text>
                  <text class="waste-name">纸类</text>
                </view>
                <view class="waste-type">
                  <text class="waste-icon">🥤</text>
                  <text class="waste-name">塑料</text>
                </view>
                <view class="waste-type">
                  <text class="waste-icon">🥫</text>
                  <text class="waste-name">金属</text>
                </view>
              </view>
            </view>
          </view>
        </swiper-item>
        <swiper-item>
          <view class="hero-slide" style="background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);">
            <view class="hero-content">
              <text class="hero-title">积分商城</text>
              <text class="hero-subtitle">回收积分兑换好礼</text>
              <view class="rewards-preview">
                <view class="reward-item">🎁 精美礼品</view>
                <view class="reward-item">🛒 购物券</view>
                <view class="reward-item">💳 话费充值</view>
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <!-- 快捷功能区 -->
    <view class="quick-actions section">
      <view class="section-header">
        <text class="section-title">快捷服务</text>
        <text class="section-subtitle">一键操作，便捷高效</text>
      </view>
      <view class="actions-grid">
        <view class="action-item" @tap="navigateTo('/pages/bag-apply/bag-apply')">
          <view class="action-icon" style="background: linear-gradient(135deg, #8BC34A 0%, #7CB342 100%);">
            <text class="action-emoji">📦</text>
          </view>
          <text class="action-text">申领回收袋</text>
          <text class="action-desc">免费配送到家</text>
        </view>
        <view class="action-item" @tap="switchTab('/pages/recycle/recycle')">
          <view class="action-icon" style="background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%);">
            <text class="action-emoji">♻️</text>
          </view>
          <text class="action-text">下单回收</text>
          <text class="action-desc">上门回收服务</text>
        </view>
        <view class="action-item" @tap="navigateTo('/pages/address/address')">
          <view class="action-icon" style="background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);">
            <text class="action-emoji">📍</text>
          </view>
          <text class="action-text">地址管理</text>
          <text class="action-desc">管理收货地址</text>
        </view>
        <view class="action-item" @tap="navigateTo('/pages/task/task')">
          <view class="action-icon" style="background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);">
            <text class="action-emoji">🎯</text>
          </view>
          <text class="action-text">任务中心</text>
          <text class="action-desc">完成任务得积分</text>
        </view>
      </view>
    </view>

    <!-- 回收流程详解 -->
    <view class="process-section section">
      <view class="section-header">
        <text class="section-title">回收流程</text>
        <text class="section-subtitle">简单6步，轻松回收</text>
      </view>
      <view class="process-timeline">
        <view class="timeline-item" v-for="(step, index) in processSteps" :key="index">
          <view class="timeline-dot">
            <text class="step-number">{{ index + 1 }}</text>
          </view>
          <view class="timeline-content">
            <view class="step-header">
              <text class="step-icon">{{ step.icon }}</text>
              <text class="step-title">{{ step.title }}</text>
            </view>
            <text class="step-desc">{{ step.desc }}</text>
            <text class="step-tip">{{ step.tip }}</text>
          </view>
          <view v-if="index < processSteps.length - 1" class="timeline-line"></view>
        </view>
      </view>
    </view>

    <!-- 环保数据统计 -->
    <view class="stats-section section">
      <view class="section-header">
        <text class="section-title">环保贡献</text>
        <text class="section-subtitle">您的每一次回收都在改变世界</text>
      </view>
      <view class="stats-grid">
        <view class="stat-card">
          <view class="stat-icon">♻️</view>
          <text class="stat-number">{{ userStats.totalRecycle }}</text>
          <text class="stat-label">累计回收(kg)</text>
          <text class="stat-growth">+{{ userStats.recycleGrowth }}%</text>
        </view>
        <view class="stat-card">
          <view class="stat-icon">🌱</view>
          <text class="stat-number">{{ userStats.carbonReduction }}</text>
          <text class="stat-label">减少碳排放(kg)</text>
          <text class="stat-growth">+{{ userStats.carbonGrowth }}%</text>
        </view>
        <view class="stat-card">
          <view class="stat-icon">💧</view>
          <text class="stat-number">{{ userStats.waterSaved }}</text>
          <text class="stat-label">节约用水(L)</text>
          <text class="stat-growth">+{{ userStats.waterGrowth }}%</text>
        </view>
        <view class="stat-card">
          <view class="stat-icon">🏆</view>
          <text class="stat-number">{{ userStats.points }}</text>
          <text class="stat-label">累计积分</text>
          <text class="stat-growth">可兑换好礼</text>
        </view>
      </view>
    </view>

    <!-- 最新动态 -->
    <view class="news-section section">
      <view class="section-header">
        <text class="section-title">最新动态</text>
        <text class="more-link" @tap="switchTab('/pages/news/news')">查看更多 ></text>
      </view>
      <view class="news-list">
        <view class="news-item" v-for="(news, index) in newsList" :key="index" @tap="viewNews(news)">
          <view class="news-image">
            <text class="news-category-icon">{{ news.categoryIcon }}</text>
          </view>
          <view class="news-content">
            <text class="news-title">{{ news.title }}</text>
            <text class="news-summary">{{ news.summary }}</text>
            <view class="news-meta">
              <text class="news-time">{{ news.time }}</text>
              <view class="news-tag" :class="'tag-' + news.category">{{ news.categoryName }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 推荐商品 -->
    <view class="products-section section">
      <view class="section-header">
        <text class="section-title">积分好礼</text>
        <text class="more-link" @tap="switchTab('/pages/mall/mall')">更多商品 ></text>
      </view>
      <scroll-view class="products-scroll" scroll-x>
        <view class="products-list">
          <view class="product-item" v-for="(product, index) in recommendProducts" :key="index" @tap="viewProduct(product)">
            <view class="product-image">
              <text class="product-emoji">{{ product.emoji }}</text>
            </view>
            <text class="product-name">{{ product.name }}</text>
            <view class="product-price">
              <text class="price-points">{{ product.points }}积分</text>
              <text class="price-original">¥{{ product.originalPrice }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 底部安全区域 -->
    <view class="safe-area-bottom"></view>
  </view>

  <!-- 自定义底部导航栏 -->
  <custom-tab-bar ref="tabBar" />
</template>

<script setup>
import CustomTabBar from '@/custom-tab-bar/index.vue'
import { ref, onMounted, getCurrentInstance } from 'vue'

// 回收流程数据
const processSteps = ref([
  { 
    icon: '🆓', 
    title: '免费申领回收袋', 
    desc: '在线申请，免费配送到家', 
    tip: '支持多种规格选择' 
  },
  { 
    icon: '🚚', 
    title: '专业配送服务', 
    desc: '工作人员上门配送回收袋', 
    tip: '预约时间灵活' 
  },
  { 
    icon: '📦', 
    title: '分类收集物品', 
    desc: '按类别收集可回收物品', 
    tip: '记得清洗干净哦' 
  },
  { 
    icon: '📱', 
    title: '扫码下单回收', 
    desc: '小程序扫码一键下单', 
    tip: '操作简单快捷' 
  },
  { 
    icon: '♻️', 
    title: '上门回收服务', 
    desc: '回收员上门取袋发新袋', 
    tip: '循环使用更环保' 
  },
  { 
    icon: '💰', 
    title: '获得环保收益', 
    desc: '根据回收物品获得积分奖励', 
    tip: '积分可兑换好礼' 
  }
])

// 用户统计数据
const userStats = ref({
  totalRecycle: '1,234',
  recycleGrowth: 15,
  carbonReduction: '567',
  carbonGrowth: 12,
  waterSaved: '89',
  waterGrowth: 8,
  points: '2,580',
})

// 最新动态数据
const newsList = ref([
  { 
    title: '废品回收新政策发布，回收更便民', 
    summary: '政府出台新政策，简化回收流程，提高回收效率...',
    time: '2小时前', 
    category: 'policy',
    categoryName: '政策',
    categoryIcon: '📋'
  },
  { 
    title: '环保积分兑换活动火热进行中', 
    summary: '限时活动，积分兑换商品享受额外折扣...',
    time: '5小时前', 
    category: 'activity',
    categoryName: '活动',
    categoryIcon: '🎉'
  },
  { 
    title: '新增10个回收站点，服务更便捷', 
    summary: '为了更好地服务用户，我们在市区新增了10个回收站点...',
    time: '1天前', 
    category: 'notice',
    categoryName: '通知',
    categoryIcon: '📢'
  }
])

// 推荐商品数据
const recommendProducts = ref([
  { name: '星巴克咖啡券', emoji: '☕', points: 500, originalPrice: 35 },
  { name: '环保购物袋', emoji: '🛍️', points: 200, originalPrice: 15 },
  { name: '手机话费充值', emoji: '📱', points: 1000, originalPrice: 50 },
  { name: '精美笔记本', emoji: '📓', points: 300, originalPrice: 20 },
  { name: '蓝牙耳机', emoji: '🎧', points: 2000, originalPrice: 99 }
])

// 页面跳转方法
const navigateTo = (url) => {
  uni.navigateTo({ url })
}

// tabBar 页面跳转方法
const switchTab = (url) => {
  uni.switchTab({ url })
}

const viewNews = (news) => {
  uni.navigateTo({
    url: `/pages/news-detail/news-detail?id=${news.id}`
  })
}

const viewProduct = (product) => {
  uni.navigateTo({
    url: `/pages/product-detail/product-detail?id=${product.id}`
  })
}

onMounted(() => {
  // 设置当前选中的 tab
  const instance = getCurrentInstance()
  if (instance && instance.refs.tabBar) {
    instance.refs.tabBar.setSelected(0)
  }
})
</script>

<style lang="scss" scoped>
.index-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 140rpx; /* 为底部导航栏预留空间 */
}

/* 轮播图区域 */
.hero-section {
  height: 500rpx;
  margin-bottom: 32rpx;
}

.hero-swiper {
  height: 100%;
  border-radius: 0 0 32rpx 32rpx;
  overflow: hidden;
}

.hero-slide {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 60rpx 40rpx;
}

.hero-content {
  text-align: center;
  color: white;
  width: 100%;
}

.hero-title {
  font-size: 56rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 20rpx;
  text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
}

.hero-subtitle {
  font-size: 32rpx;
  opacity: 0.95;
  margin-bottom: 40rpx;
}

.hero-features {
  display: flex;
  justify-content: center;
  gap: 32rpx;
  flex-wrap: wrap;
}

.feature-item {
  font-size: 24rpx;
  background: rgba(255, 255, 255, 0.2);
  padding: 12rpx 24rpx;
  border-radius: 24rpx;
  backdrop-filter: blur(10rpx);
}

.waste-types, .rewards-preview {
  display: flex;
  justify-content: center;
  gap: 40rpx;
  margin-top: 20rpx;
}

.waste-type {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
}

.waste-icon {
  font-size: 48rpx;
}

.waste-name {
  font-size: 24rpx;
}

.reward-item {
  font-size: 24rpx;
  background: rgba(255, 255, 255, 0.2);
  padding: 12rpx 20rpx;
  border-radius: 20rpx;
  backdrop-filter: blur(10rpx);
}

/* 通用区块样式 */
.section {
  margin: 0 32rpx 32rpx;
  background: white;
  border-radius: 24rpx;
  padding: 40rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 32rpx;
}

.section-title {
  font-size: 40rpx;
  font-weight: 700;
  color: #333;
}

.section-subtitle {
  font-size: 24rpx;
  color: #666;
  margin-top: 8rpx;
}

.more-link {
  font-size: 26rpx;
  color: #8BC34A;
  font-weight: 500;
}

/* 快捷功能区 */
.actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32rpx 24rpx;
  border-radius: 20rpx;
  background: linear-gradient(135deg, rgba(139, 195, 74, 0.05) 0%, rgba(139, 195, 74, 0.02) 100%);
  border: 2rpx solid rgba(139, 195, 74, 0.1);
  transition: all 0.3s ease;
}

.action-item:active {
  transform: translateY(-4rpx);
  box-shadow: 0 12rpx 32rpx rgba(139, 195, 74, 0.2);
}

.action-icon {
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
}

.action-emoji {
  font-size: 48rpx;
}

.action-text {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 8rpx;
}

.action-desc {
  font-size: 22rpx;
  color: #666;
  text-align: center;
}

/* 流程时间线 */
.process-timeline {
  position: relative;
}

.timeline-item {
  display: flex;
  margin-bottom: 40rpx;
  position: relative;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-dot {
  width: 64rpx;
  height: 64rpx;
  background: linear-gradient(135deg, #8BC34A 0%, #7CB342 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
  flex-shrink: 0;
  box-shadow: 0 4rpx 16rpx rgba(139, 195, 74, 0.3);
  z-index: 2;
}

.step-number {
  font-size: 24rpx;
  font-weight: bold;
  color: white;
}

.timeline-line {
  position: absolute;
  left: 32rpx;
  top: 64rpx;
  width: 4rpx;
  height: 40rpx;
  background: linear-gradient(to bottom, #8BC34A, rgba(139, 195, 74, 0.3));
  z-index: 1;
}

.timeline-content {
  flex: 1;
  padding-top: 8rpx;
}

.step-header {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}

.step-icon {
  font-size: 32rpx;
  margin-right: 12rpx;
}

.step-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.step-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
  margin-bottom: 8rpx;
}

.step-tip {
  font-size: 22rpx;
  color: #8BC34A;
  background: rgba(139, 195, 74, 0.1);
  padding: 8rpx 16rpx;
  border-radius: 16rpx;
  display: inline-block;
}

/* 统计数据 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.stat-card {
  text-align: center;
  padding: 32rpx 20rpx;
  border-radius: 20rpx;
  background: linear-gradient(135deg, rgba(139, 195, 74, 0.08) 0%, rgba(139, 195, 74, 0.03) 100%);
  border: 2rpx solid rgba(139, 195, 74, 0.1);
  position: relative;
  overflow: hidden;
}

.stat-icon {
  font-size: 48rpx;
  margin-bottom: 16rpx;
}

.stat-number {
  font-size: 40rpx;
  font-weight: bold;
  color: #8BC34A;
  display: block;
  margin-bottom: 8rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.stat-growth {
  font-size: 20rpx;
  color: #4CAF50;
  background: rgba(76, 175, 80, 0.1);
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
}

/* 新闻列表 */
.news-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.news-item {
  display: flex;
  padding: 24rpx;
  background: linear-gradient(135deg, rgba(139, 195, 74, 0.03) 0%, rgba(139, 195, 74, 0.01) 100%);
  border-radius: 16rpx;
  border: 2rpx solid rgba(139, 195, 74, 0.08);
  transition: all 0.3s ease;
}

.news-item:active {
  transform: translateY(-2rpx);
  box-shadow: 0 8rpx 24rpx rgba(139, 195, 74, 0.15);
}

.news-image {
  width: 80rpx;
  height: 80rpx;
  border-radius: 16rpx;
  background: linear-gradient(135deg, #8BC34A 0%, #7CB342 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.news-category-icon {
  font-size: 32rpx;
}

.news-content {
  flex: 1;
}

.news-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
  margin-bottom: 8rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.news-summary {
  font-size: 24rpx;
  color: #666;
  line-height: 1.4;
  margin-bottom: 12rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.news-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.news-time {
  font-size: 22rpx;
  color: #999;
}

.news-tag {
  padding: 6rpx 12rpx;
  border-radius: 12rpx;
  font-size: 20rpx;
  font-weight: 500;
}

.tag-policy {
  background: rgba(33, 150, 243, 0.1);
  color: #2196F3;
}

.tag-activity {
  background: rgba(255, 152, 0, 0.1);
  color: #FF9800;
}

.tag-notice {
  background: rgba(139, 195, 74, 0.1);
  color: #8BC34A;
}

/* 推荐商品 */
.products-scroll {
  white-space: nowrap;
}

.products-list {
  display: flex;
  gap: 20rpx;
  padding-bottom: 20rpx;
}

.product-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24rpx;
  background: linear-gradient(135deg, rgba(139, 195, 74, 0.05) 0%, rgba(139, 195, 74, 0.02) 100%);
  border-radius: 16rpx;
  border: 2rpx solid rgba(139, 195, 74, 0.1);
  min-width: 200rpx;
  transition: all 0.3s ease;
}

.product-item:active {
  transform: translateY(-4rpx);
  box-shadow: 0 8rpx 24rpx rgba(139, 195, 74, 0.2);
}

.product-image {
  width: 80rpx;
  height: 80rpx;
  border-radius: 16rpx;
  background: linear-gradient(135deg, #8BC34A 0%, #7CB342 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
}

.product-emoji {
  font-size: 36rpx;
}

.product-name {
  font-size: 26rpx;
  font-weight: 500;
  color: #333;
  text-align: center;
  margin-bottom: 12rpx;
  line-height: 1.3;
}

.product-price {
  text-align: center;
}

.price-points {
  font-size: 28rpx;
  font-weight: bold;
  color: #8BC34A;
  display: block;
  margin-bottom: 4rpx;
}

.price-original {
  font-size: 22rpx;
  color: #999;
  text-decoration: line-through;
}

.safe-area-bottom {
  height: env(safe-area-inset-bottom);
}
</style>